<!--
  Copyright (c) 2018-2999 广州市蓝海创新科技有限公司 All rights reserved.

  https://www.mall4j.com/

  未经允许，不可做商业用途！

  版权所有，侵权必究！
-->

<template>
  <div
    class="Mall4j con-box page-uc-password"
    style="width: 1080px;"
  >
    <div class="box-tit">
      {{ $t('ucPassword.changePassword') }}
    </div>
    <div
      v-if="registerStep===1"
      :class="['box-content','password',$t('language') === 'en'?'en':'']"
    >
      <div class="item">
        <div class="tit">
          {{ $t('ucPassword.verifiedMobile') }}：
        </div>
        <div class="phone-number">
          {{ mobile }}
        </div>
      </div>
      <div :class="['item',errorTips === 2? 'error':'']">
        <div
          class="tit"
          :style="$t('language') === 'en'?'width: 154px;margin-right: 20px;' : ''"
        >
          {{ $t('ucPassword.mobileCode') }}：
        </div>
        <input
          v-model="validCode"
          type="text"
          class="text"
          :placeholder="$t('ucPassword.enterCode')"
        >
        <a
          v-show="show"
          href="javascript:void(0)"
          class="get-code"
          @click="getCode()"
        >{{ $t('ucPassword.getCode') }}</a>
        <div
          v-if="errorTips===2"
          class="error-text"
        >
          {{ $t('ucPassword.pleaseEnter') }}
        </div>
      </div>
      <div
        v-show="!show"
        class="item des-box"
      >
        <div class="tit">
          &nbsp;
        </div>
        <div class="des">
          {{ $t('ucPassword.sendCodeTips1') }}
          <span class="time">{{ count }}s</span>{{ $t('ucPassword.sendCodeTips2') }}
        </div>
      </div>
      <div class="item">
        <div class="tit">
          &nbsp;
        </div>
        <a
          href="JavaScript:"
          class="btn"
          @click="registerNext"
        >{{ $t('ucPassword.completed') }}</a>
      </div>
    </div>

    <div
      v-if="registerStep===2"
      :class="['box-content','password',$t('language') === 'en'?'en':'']"
    >
      <div :class="['item',errorTips===4 || errorTips===6 ? 'error':'']">
        <div class="tit">
          {{ $t('ucPassword.enterNewPassword') }}：
        </div>
        <input
          v-model="password"
          v-input-rule
          type="password"
          class="text"
          maxlength="20"
          autocomplete="new-password"
        >
        <div
          v-if="errorTips===4"
          class="error-text"
        >
          {{ $t('ucPassword.enterNewPasswordTips1') }}
        </div>
        <div
          v-if="errorTips===6"
          class="error-text"
        >
          {{ $t('ucPassword.enterNewPasswordTips2') }}
        </div>
      </div>
      <div class="item des-box">
        <div class="tit">
          &nbsp;
        </div>
        <div class="des">
          {{ $t('register.passwordVerification') }}
        </div>
      </div>
      <div :class="['item',errorTips===5? 'error':'']">
        <div class="tit">
          {{ $t('ucPassword.enterNewPasswordTips4') }}：
        </div>
        <input
          v-model="confirmPwd"
          v-input-rule
          class="text"
          type="password"
          maxlength="20"
          autocomplete="new-password"
        >
        <div
          v-if="errorTips===5"
          class="error-text"
        >
          {{ $t('ucPassword.enterNewPasswordTips5') }}
        </div>
      </div>
      <div class="item">
        <div class="tit">
          &nbsp;
        </div>
        <a
          href="JavaScript:"
          class="btn"
          @click="registerNext"
        >{{ $t('ucPassword.completed') }}</a>
      </div>
    </div>

    <div
      v-if="registerStep===3"
      class="box-content password"
    >
      <div class="item">
        <div class="tit">
          &nbsp;
        </div>
        <div class="tip-box">
          <div class="tip">
            {{ $t('ucPassword.congratulations') }}
          </div>
          <div class="tip-des">
            {{ $t('ucPassword.jumping') }}
          </div>
          <router-link
            to="/login"
            class="next suc-btn"
          >
            {{ $t('ucPassword.jumpNow') }}
          </router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import Cookie from 'vue-cookies'
import { encrypt } from '@/utils/crypto.js'

const router = useRouter()
const route = useRoute()
const userStore = useUserStore()

const errorTips = ref(0)

onMounted(() => {
  // 设置网页标题
  document.title = $t('ucPassword.changePassword')
  getUserInfo()
})

let userMobile = ''
const mobile = ref('')
const getUserInfo = () => {
  http.get('/p/user/userInfo', {}).then(({ data }) => {
    userMobile = data.userMobile
    mobile.value = data.mobile
  })
}

let hadGotCode = false
// 验证码相关
const show = ref(true)
const count = ref('')
let timer = null
/**
 * 获取登录验证码
 */
const getCode = () => {
  if (hadGotCode) {
    return
  }
  hadGotCode = true
  const sendSmsParam = {
    mobile: userMobile
  }
  http.post('/sms/sendUpdatePwdCode', sendSmsParam).then(() => {
    const timeCount = 60
    if (!timer) {
      count.value = timeCount
      show.value = false
      timer = setInterval(() => {
        if (count.value > 0 && count.value <= timeCount) {
          count.value--
        } else {
          show.value = true
          clearInterval(timer)
          timer = null
          hadGotCode = false
        }
      }, 1000)
    }
  }).catch(() => {
    hadGotCode = false
  })
}

const registerStep = ref(1) // 修改密码步骤
const validCode = ref('')
let checkRegisterSmsFlag = '' // 校验验证码成功的标识
const password = ref('')
const confirmPwd = ref('')
/**
 * 下一步按钮
 */
const registerNext = () => {
  errorTips.value = 0
  if (registerStep.value === 1) {
    if (!validCode.value.trim()) {
      errorTips.value = 2
    } else {
      errorTips.value = 0
      // 校验验证码
      const checkRegisterSmsParam = {
        mobile: userMobile,
        validCode: validCode.value
      }
      http.put('/user/checkUpdatePwdSms', checkRegisterSmsParam)
        .then(({ data }) => {
          checkRegisterSmsFlag = data
          registerStep.value += 1
        })
    }
  } else if (registerStep.value === 2) {
    const reg = /^(?=.*[a-zA-Z])(?=.*\d)(?=.*(\W|_))[A-Za-z\d(\W|_)]{8,20}$/
    const result = reg.test(password.value)
    if (!password.value.trim()) {
      errorTips.value = 4
    } else if (!result) {
      errorTips.value = 6
    } else if (password.value !== confirmPwd.value) {
      errorTips.value = 5
    } else {
      // 请求注册
      const userRegisterParam = {
        appType: 3, // 应用类型 1小程序 2微信公众号 3 PC
        checkRegisterSmsFlag, // 校验登录注册验证码成功的标识
        mobile: userMobile,
        userName: '',
        password: encrypt(password.value)
      }
      http.put('/user/updatePwd', userRegisterParam)
        .then(() => {
          registerStep.value += 1
          loginOut()
          setTimeout(() => {
            router.push('/login')
          }, 100)
        })
    }
  }
}

/**
 * 退出登录
 */
const loginOut = () => {
  http.post('/logOut').then(() => {
    const user = {
      nickName: '',
      userAvatar: ''
    }
    userStore.setUser(user)
    Cookie.remove('bbcToken')
    window.localStorage.clear()
    route.path === '/' ? location.reload() : router.push({ path: '/' })
  })
}

</script>

<style lang="scss" scoped>
@use "index";
</style>
<style lang="scss" scoped>
@use "../common/scss/user-center";
</style>
<style lang="scss" scoped>
@use "../common/scss/uc-edit";
</style>
